<template>
  <div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, watchEffect } from 'vue'

export default defineComponent({
  setup() {
    // const message = ref<string>('')
    // const index = ref<number>(0)

    // setTimeout(() => {
    //   message.value = 'hello world!'
    //   index.value++
    // }, 2000)

    // 抽离相同的处理行为为公共函数
    // const handleWatch = (
    //   newValue: string | number,
    //   oldValue: string | number,
    // ): void => {
    //   console.log({ newValue, oldValue });

    // }


    // 然后定义多个监听操作，传入这个公共函数
    // watch(message, handleWatch)
    // watch(index, handleWatch)


    // 数组源格式监听多个
    // 什么情况下可能会用到批量监听呢？
    // 比如一个子组件有多个 props ，当有任意一个 prop 发生变化时，都需要执行初始化函数重置组件的状态，那么这个时候就可以用上这个功能啦！
    // watch(
    //   [message, index],
    //   ([newMessage, newIndex], [oldMessage, oldIndex]) => {
    //     console.log(`message的变化`, { newMessage, oldMessage });
    //     console.log(`index的变化`, { newIndex, oldIndex });
    //   }
    // )

    // 简化版
    const name = ref<string>('Petter')
    const age = ref<number>(19)

    const getUserInfo = (): void => {
      console.log({
        name: name.value,
        age: age.value
      });

    }

    setTimeout(() => {
      name.value = 'tom'
    }, 2000)

    setTimeout(() => {
      age.value = 20
    }, 4000)

    watchEffect(getUserInfo)


    return {}
  }
})
</script>

<style scoped>

</style>
